import Vue from "vue";
import App from "./App.vue";
// 1引入vuex
import Vuex from "vuex";
// 2让Vue食用vuex
Vue.use(Vuex);
// 3创建仓库实例
const store = new Vuex.Store({
  // 在仓库里写配置项
  state: {
    count: 20,
    msg: "wuhao",
  },
  mutations: {
    changeMsg(s, str) {
      console.log(s); //第一个参数是state,形参是自己定义的
      console.log(str);
      s.msg = str;
    },
    addCount(state, num = 1) {
      state.count += num;
    },
  },
  actions: {
    asyncAddCount(context, num = 1) {
      // console.log("asyncAddCount函数触发了");
      setTimeout(() => {
        // context是个对象,有commit方法,可以调用mutations内的方法,实现异步操作
        console.log("asyncAddCount函数触发了");
        console.log(context);
        context.commit("addCount", num);
      }, 1000);
    },
  },
  getters: {
    squCount(state) {
      return state.count ** 2;
    },
  },
});
Vue.config.productionTip = false;
// 4让vuex仓库实例和vue实例关联
new Vue({
  store,
  render: (h) => h(App),
}).$mount("#app");
